<template>
  <transition name="el-zoom-in-top" appear>
    <div id="content_frame" :style="contentStyle">
      <el-container class="el-container-full">
        <!-- 工具栏区域-->
        <el-drawer :visible.sync="drawer" direction="rtl" :modal="false" :size="'100%'" :title="'云顶'">
          <YChat :drawer="drawer"></YChat>
        </el-drawer>
        <!-- 顶部区域-->
        <el-header class="content_top" :style="top_style">
          <ContentHeader></ContentHeader>
        </el-header>
        <!-- 主要内容区域-->
        <el-main style="height: 85%; padding-top: 1%; padding-bottom: 1%">
          <Desktop></Desktop>
          <NewMiddle></NewMiddle>
        </el-main>
        <!-- 底部导航栏-->
        <el-footer class="el-footer-mac" style="height: 10%">
          <Bottom></Bottom>
        </el-footer>
      </el-container>
    </div>
  </transition>
</template>

<script>
import Bottom from "../components/Bottom";
import Middle from "../components/Middle.vue";
import Desktop from "../components/Desktop.vue";
import ContentHeader from "../components/headers/ContentHeader.vue";
import YChat from "../components/quickApp/YChat.vue";
import NewMiddle from '../components/NewMiddle.vue'
import { mapState, mapMutations } from "vuex";
export default {
  name: "Content",
  data() {
    return {
      imgUrl: "../assets/main_back_1.jpg",
      top_style: {
        height: "5%",
        padding: "0px",
        background: "#16222A",
        border: "1px #ccc",
        boxShadow: "0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)",
        opacity: "0.8",
      },
      drawer: false,
    };
  },
  components: {
    Bottom,
    Middle,
    Desktop,
    ContentHeader,
    YChat,
    NewMiddle
  },
  mounted() {
    // 登录验证
    this.enterDefense();
    // 事件绑定
    this.$pubsub.subscribe("set_back_img", this.set_back_img);
    // 数据渲染
    this.$pubsub.subscribe("showLeftPop", this.showPop);
  },
  beforeDestroy() {
    this.$pubsub.unsubscribe("showLeftPop");
    this.$pubsub.unsubscribe("set_back_img");
  },
  methods: {
    ...mapMutations("userAbout", ["user_update", "per_update"]),
    enterDefense() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (this.token != null) {
        // 进行token的验证
        this.$basicAxios(
            this.$ms.getUserInfo(this.token),
            (resp) => {
              loading.close();
              this.user_update(resp.data.data);
              this.notify("info", `[ 欢迎回来 ] ${resp.data.data.userName}`);
            },
            (resp) => {
              loading.close();
              this.notify("warn", resp.data.msg);
              // 跳转登录页面
              this.$router.replace({ name: "login" });
            }
          )
          .then(() => {
            this.$basicAxios(this.$ms.getPer(this.token), (resp) => {
              this.per_update(resp.data.data);
            });
          });
      } else {
        // token为空 跳转登录页面
        loading.close();
        this.notify("warn", "请先登录");
        this.$router.replace({
          name: "login",
        });
      }
    },
    set_back_img(name, img) {
      this.imgUrl = img.url;
    },
    showPop() {
      this.drawer = true;
    },
  },
  computed: {
    ...mapState("userAbout", ["token", "user", "userPersonality"]),
    contentStyle() {
      return { backgroundImage: 'url("' + this.imgUrl + '")' };
    },
  },
};
</script>

<style scoped lang="less">
#content_frame {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.el-container-full {
  height: 100%;
}

.el-footer-mac {
  z-index: 2000;
  margin-top: 1%;
  width: 80%;
  margin-left: 10%;
  border-radius: 15px;
  opacity: 0.9;
  /*position: absolute; /* 一定要用绝对定位 */
  backdrop-filter: blur(1000000px);
  /* 模糊半径 */
  border: 1px #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.el-main-none {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  background: none;
  padding: 0%;
}

/deep/.el-main {
  padding: 15px;
}

/deep/.el-drawer__container {
  width: 100%;
}

/deep/.el-drawer__wrapper {
  margin-left: 20%;
  width: 80%;
}

/deep/.el-drawer__header {
  margin-bottom: 0px;
}
</style>
